<template>
    <div class="checkweb">
      <div style="width: 0; height: 0" id="map"></div>
    </div>
  </template>
      
<script>
   require('@/static/js/china.js');  // 引入中国地图组件
  export default {
    mounted() {
      console.log(window.innerHeight);
      document.getElementById("map").style.width =
        window.innerWidth / 2+50 + "px"; //初始化echarts图表宽度
      document.getElementById("map").style.height =
        window.innerHeight / 2+70  + "px"; //初始化echarts图表高度
      let myChart = this.$echarts.init(document.getElementById("map"));
      window.addEventListener("resize", () => {
        document.getElementById("map").style.width =
          window.innerWidth / 2+50 + "px";
        myChart.resize();
        document.getElementById("map").style.height =
          window.innerHeight / 2+70 + "px";
        myChart.resize();
      });
      this.$axios.post("api/EchartsMap").then(async (data)=>{
        console.log(data.data)
        this.lineCheck(await data.data)
      })
    },
    methods: {
      randomData(){
        return Math.round(Math.random()*500);
      },
      lineCheck(data) {
        let myChart = this.$echarts.init(document.getElementById("map"));
        var mydata =data.data
        const max=Math.floor(data.max*0.1)
        
            myChart.setOption({
                backgroundColor: 'rgba(0,0,0,0)',
                title: {
                    top:"10%",
                    text: '用户分布地区',  
                    subtext: '',  
                    x:'center',
                    textStyle:{
                      color:"rgb(244,244,244)"
                    }
                },  
                tooltip : {  
                    trigger: 'item',
                    formatter: "{b} <br/>{c}人",
                },  
                
                //左侧小导航图标
                visualMap: {  
                    show : true,  
                    x: 'left',  
                    y: 'center',  
                    splitList: [   
                        {start: max*9, end:data.max},{start: max*7, end: max*9},  
                        {start: max*5, end: max*7},{start: max*3, end: max*5},  
                        {start: max*1, end: max*3},{start: 0, end: max*1},  
                    ],
                    color: ['red', '#ff3131', '#ff6f6f','#ff9191', '#ffc8c8', '#ffecec']  
                },  
                
                //配置属性
                series: [{
                    name: '数据',  
                    type: 'map',  
                    mapType: 'china',   
                    roam: true,  
                    label: {  
                        normal: {  
                            show: true  //省份名称  
                        },  
                        emphasis: {  
                            show: false  
                        }  
                    },  
                    data:mydata  //数据
                }]  
            })
      }
    }
}
</script>

<style>

</style>